<template>
  <div style="margin-bottom: 20px">
    <el-button type="primary" plain @click="handleDialog">
      添加采集源
    </el-button>
  </div>
  <el-table
    v-loading="tableLoading"
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
  >
    <el-table-column prop="collectName" label="名称"> </el-table-column>
    <el-table-column prop="collectUrl" label="采集地址"> </el-table-column>
    <el-table-column label="操作">
      <template #default>
        <el-button type="text">编辑</el-button>
        <el-button type="text">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加采集源 -->
  <el-dialog v-model="dialogVisible" title="添加采集源" width="60%">
    <el-form
      ref="diaForm"
      :model="diaFormData"
      :rules="diaFormRules"
      label-width="110px"
      style="width: 460px"
    >
      <el-form-item prop="collectName" label="名称：">
        <el-input v-model="diaFormData.collectName" />
      </el-form-item>
      <el-form-item prop="collectUrl" label="采集地址：">
        <el-input v-model="diaFormData.collectUrl" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="diaBtnLoding"> 确 定 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑采集源 -->
  <el-dialog v-model="editDialogVisible" title="编辑采集源" width="60%">
    <el-form
      ref="editDiaForm"
      :model="editDiaFormData"
      :rules="editFiaFormRules"
      label-width="110px"
      style="width: 460px"
    >
      <el-form-item prop="collect_name" label="名称：">
        <el-input v-model="editDiaFormData.collect_name" />
      </el-form-item>
      <el-form-item prop="collect_url" label="采集地址：">
        <el-input v-model="editDiaFormData.collect_url" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="editBtnLoaing"> 确 定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
import { collect } from '@i/vod'
export default {
  setup() {
    const ctx = getCurrentInstance().ctx
    // const confirm = () =>
    //   ctx.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })

    // 表格
    let table = reactive({
      tableLoading: false,
      tableData: [],
      async collectList() {
        table.tableData = await collect()
      }
    })

    // 添加采集源
    let addTypeDialog = reactive({
      dialogVisible: false,
      diaBtnLoding: false,
      diaFormRules: {
        collectName: { required: true, message: '请输入名称' },
        collectUrl: { required: true, message: '请输入采集地址' }
      },
      diaFormData: {
        collectName: '',
        collectUrl: ''
      },
      handleDialog() {
        addTypeDialog.dialogVisible = true
        // 移除表单校验
        ctx.$nextTick(() => {
          ctx.$refs.diaForm.clearValidate()
          ctx.$refs.diaForm.resetFields()
        })
      }
    })

    // 编辑采集源
    const editTypeDialog = reactive({
      editDialogVisible: false,
      editBtnLoaing: false,
      editDiaFormData: {},
      editFiaFormRules: {
        collect_name: { required: true, message: '请输入名称' },
        collect_url: { required: true, message: '请输入采集地址' }
      },
      handleEdit(val) {
        editTypeDialog.editDiaFormData = { ...val }
        editTypeDialog.editDialogVisible = true
      }
    })

    onMounted(() => table.collectList())

    return {
      ...toRefs(table),
      ...toRefs(addTypeDialog),
      ...toRefs(editTypeDialog)
    }
  }
}
</script>

<style lang="scss" scoped></style>
